<template>
  <div class="search-container">
    <div class="search-header">
      <div class="search-box">
        <input type="text" v-model="keywords" @keydown.enter="clickToSearch" />
        <div class="bottom" @click="clickToSearch" >
          <yun-icon name="search" color="white"></yun-icon>
        </div>
      </div>
    </div>
    <div class="search-center">
      <div class="search-center__nav">
        <nav-wrap
          :list="list"
          width="106px"
          height="231px"
        ></nav-wrap>
      </div>
      <div class="search-center__content">
<!--        <transition name="fade-transform" mode="out-in">-->
          <nuxt-child keep-alive :total="total" :keywords="keywords" :resultList="resultList"></nuxt-child>
<!--        </transition>-->
        <pagination style="margin: 30px auto;" :pages="pages" ref="pagination"  v-on:listenPageChange="changePage"></pagination>

      </div>
      <div class="search-center__right">
        <card-container
          title="推荐历史"
          width="302px"
          label="清空"
          style="padding-bottom: 20px"

        >
          <div class="search-container__rightone">

            <p>java</p>
            <yun-icon name="close2"  class="yun-icon"></yun-icon>

          </div>
        </card-container>
        <card-container
          title="相关搜索"
          width="302px"
          style="padding-bottom: 20px;margin-top: 16px"

        >
          <div class="search-container__righttwo">
            <div class="righttwo__box">
              <p>java</p>
            </div>
            <div class="righttwo__box">
              <p>java</p>
            </div>


          </div>
        </card-container>

      </div>

    </div>
  </div>
</template>

<script>
  import NavWrap from "../components/pc/nav/navWrap";
  import CardContainer from "../components/pc/cardContainer";
  import Pagination from '../components/pc/pagination';
  import config from '../action/config';
  import {globalBus} from "../components/common/globalBus";

  export default {
        name: "search",
      components:{
          NavWrap,CardContainer,Pagination
      },
      data(){
          return {
            list:[
              {
                label:"全部",
                address:"/search/all"
              },
              {
                label:"项目",
                address:"/search/project"
              },
              {
                label:"博客",
                address:"/search/blog"
              },
              {
                label:"问答",
                address:"/search/question"
              },
              {
                label:"话题",
                address:"/search/topic"
              },
              {
                label:"用户",
                address:"/search/user"
              }
            ],
            resultList:[],
            pages:1,
            total:0
          }
      },
      created() {
        this.keywords = this.$route.query.keywords;
      },

      watch:{
        $route(){
          if(this.$route.query.keywords){
            this.keywords = this.$route.query.keywords;

          }else{
            this.resultList = [];
            this.total = 0;
            this.restartPagination();
            this.dataGetSearch(1,this.keywords);
          }

        },
        keywords(val){
          this.resultList = [];
          this.total = 0;
          this.restartPagination();
          this.dataGetSearch(1);
        }
      },

      methods:{
        clickToSearch(){
          this.restartPagination();
          this.dataGetSearch(1);
        },
        restartPagination(){
          if(process.browser){
            this.$refs.pagination.setCurrentPage(1)
          }
        },
        dataGetSearch(currentPage,keywords2)  {
          let pathName = this.$route.name;
          let keywords = keywords2||this.keywords;
          let index = pathName.lastIndexOf('-');
          let name = pathName.substring(index+1);
          let params;
          if(name.toUpperCase()!=='ALL'){
            params = {
              page:currentPage,
              size:8,
              keywords,
              type:name.toUpperCase()
            };
          }else{
            params = {
              page:currentPage,
              size:8,
              keywords,
            };
          }

          this.$axios.$get(config.api.get.Search.search,{
            params:params
          }).then((response)=>{
            if(response.code===0){
              this.resultList = response.data.dataList;
              this.pages = response.data.totalPage;
              this.total = response.data.totalRecords;
            }
          })
        },
        changePage(currentPage){
          //返回页数 请求新的数据
          this.dataGetSearch(currentPage);
        },
      },

    }
</script>

<style lang="scss" scoped>
  .search-container {
    padding-bottom: 60*$length;
    .search-header{
      width: 100%;
      background:url("../assets/img/search_bg.png") ;
      height: 160*$length;
      display: flex;
      align-items: center;
      .search-box{
        width: 408*$length;
        height: 40*$length;
        @extend %flex-row-spb;
        margin:  0 auto;
        input{
          @include border-radius(4*$length 0 0 4*$length);
          width: 318*$length;
          height: 40*$length;
          padding-left: 10*$length;
        }
        .bottom{
          @include border-radius(0 4*$length 4*$length 0);
          width: 90*$length;
          height: 40*$length;
          background-color: #00AAE6;
          text-align: center;
          line-height: 40*$length;
          @extend %cursorPointer;
          @extend %animate-transition;
          &:hover{
            filter:brightness(130%);
          }
        }

      }

    }
    .search-center {
      width: $pageWidth;
      margin: 16*$length auto 0;
      @extend %flex-row-spb;
      align-items: start;
    }

    .search-center__content{
      min-height:700*$length;
    }
    .search-center__right{
      .search-container__rightone{
        width: 282*$length;
        height: 24*$length;
        margin: 0 auto;
        margin-top: 15*$length;
        color: #ccc;
        position: relative;
        .yun-icon{
          font-size: 10*$length;
          color: #ccc;
          position: absolute;
          right: 1*$length;
          top: 2*$length;
        }
        :hover{
          background-color: #F4F8FA;
        }
      }
      .search-container__righttwo{
        width: 282*$length;
        margin: 0 auto;
        margin-top: 10*$length;
        .righttwo__box{
          background-color: #F4F8FA;
          margin-top:10px;
          margin-left: 15px;
          height:20*$length;
          display: inline-block;
          padding-left: 10px;
          padding-right: 10px;
          @include border-radius(2px)
        }
      }
    }
  }

</style>
